<template>
  <div class="goodsTypeIndex">
    <el-card class="box-card">
      <!-- one------------------------------------------------------- -->
      <div slot="header" class="clearfix header">
        <span>访客记录</span>
      </div>
      <!-- -------------------------------------------------------------- -->

      <!--  搜索框-->
      <div class="filter">
        <el-input
          placeholder="请输入内容"
          v-model="search"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="searchFn"
          ></el-button>
        </el-input>

        <!-- 日期 -->
        <el-date-picker
          @change="datachangeFn"
          v-model="date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>

      <!-- two----------data 指的是表格的数据----------------------------->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="编号" width="180"> </el-table-column>
        <!-- 第一栏 -->
        <el-table-column
          prop="username"
          label="用户"
          width="180"
        ></el-table-column>
        <!-- 第二栏 -->
        <el-table-column
          prop="login_time"
          label="登陆时间"
          width="180"
        ></el-table-column>
        <!-- 第二栏 -->
        <el-table-column
          prop="prev_login_time"
          label="上一次登陆时间"
          width="180"
        ></el-table-column>
        <!-- 第二栏 -->
      </el-table>
      <!-- ----------------------------------------------------------------------------- -->

      <!-- three----编辑弹框------------------------------------------------------------ -->
      <el-dialog
        title="编辑商品类型"
        :visible.sync="isShowEditTk"
        width="30%"
        :before-close="handleClose"
      >
        <!-- form -->
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="类型名称" prop="type_name">
            <el-input
              type="password"
              v-model="ruleForm.type_name"
              autocomplete="off"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <!-- /form -->
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowEditTk = false">取 消</el-button>
          <el-button type="primary" @click="isShowEditTk = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- --------------------------------------------------------------------------------------- -->

      <!-- four开关 -->
      <!-- page-size	每页显示条目个数，支持 .sync 修饰符 -->
      <!-- page-sizes	每页显示个数选择器的选项设置 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[15, 30, 50, 100]"
        :page-size="15"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagetotal"
      >
        <!-- total是number类型，但是返回的接口数据是字符串，所以这边给其设置null -->
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getHistoryApi } from "@/api";
export default {
  //封装的异步请求，这边调用
  mounted() {
    this.initData();
  },
  methods: {
    //日期选择
    datachangeFn() {
      console.log(this.date);
      this.start_time = this.date ? this.date[0] : "";
      this.end_time = this.date ? this.date[1] : "";
      this.initData();
    },

    //搜索功能
    searchFn() {
      this.initData();
    },

    //异步请求部分
    initData() {
      getHistoryApi({
        pagenum: this.pagenum,
        pagesize: this.pagesize,
        start_time: this.start_time,
        end_time: this.end_time,
        uname: this
          .search /*  uname:this.search  解释：上面已经在input里面v-model=search，即数据已经保存在模型中了，此时我将用户名等于我搜索的内容*/
      }) /*那么当我触发点击事件的时候，我重新发送异步请求，页面最终显示的用户这一栏数据只能是我搜索的内容了  */
        .then(res => {
          // console.log(res) //接口数据
          this.tableData = res.data.list;
          this.pagetotal = parseInt(res.data.total);
        });
    },

    //编辑
    editFn(id, row) {
      //显示默认数据显示
      this.ruleForm.type_name = row.catename;
      //显示编辑弹框
      this.isShowEditTk = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //删除
    delFn(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    //创建
    createFn() {
      this.$router.push({ path: "/goods/type/create" });
    },

    //分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      // 修改当前页
      this.pagenum = val;
      // 重新发送异步请求
      this.initData();
    }
  },
  data() {
    return {
      //异步请球的数据
      pagetotal: 0,

      isShowEditTk: false,

      //搜索数据
      search: "",

      //日期
      date: [],

      //表单编辑数据
      ruleForm: {
        type_name: ""
      },
      rules: {
        //键 ruleForm里面的键
        //值 数组里面是一个个对象 赋值
        type_name: [
          { required: true, message: "请输入类型名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      },

      //分页
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,

      //异步请求的参数
      pagenum: "",
      pagesize: "",
      start_time: "",
      end_time: "",
      uname: "",
      tableData: []
    };
  }
};
</script>
<style lang="scss" scoped>
.goodsTypeIndex {
  //头
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  //分页
  .el-pagination {
    margin-top: 20px;
    text-align: center;
  }

  //搜索
  .filter {
    overflow: hidden;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .input-with-select {
      width: 300px;
    }
  }
}
</style>
